<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">K线图示例</div>
      <div class="sub_title"></div>
      <slot name="title"></slot>
    </div>
    <div id="candle_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { DataView } from "@antv/data-set";
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      chart: null,
      dataList: [
        {
          time: "2015-11-19",
          start: 8.18,
          max: 8.33,
          min: 7.98,
          end: 8.32,
          volumn: 1810,
          money: 14723.56,
        },
        {
          time: "2015-11-18",
          start: 8.37,
          max: 8.6,
          min: 8.03,
          end: 8.09,
          volumn: 2790.37,
          money: 23309.19,
        },
        {
          time: "2015-11-17",
          start: 8.7,
          max: 8.78,
          min: 8.32,
          end: 8.37,
          volumn: 3729.04,
          money: 31709.71,
        },
        {
          time: "2015-11-16",
          start: 8.18,
          max: 8.69,
          min: 8.05,
          end: 8.62,
          volumn: 3095.44,
          money: 26100.69,
        },
        {
          time: "2015-11-13",
          start: 8.01,
          max: 8.75,
          min: 7.97,
          end: 8.41,
          volumn: 5815.58,
          money: 48562.37,
        },
        {
          time: "2015-11-12",
          start: 7.76,
          max: 8.18,
          min: 7.61,
          end: 8.15,
          volumn: 4742.6,
          money: 37565.36,
        },
        {
          time: "2015-11-11",
          start: 7.55,
          max: 7.81,
          min: 7.49,
          end: 7.8,
          volumn: 3133.82,
          money: 24065.42,
        },
        {
          time: "2015-11-10",
          start: 7.5,
          max: 7.68,
          min: 7.44,
          end: 7.57,
          volumn: 2670.35,
          money: 20210.58,
        },
        {
          time: "2015-11-09",
          start: 7.65,
          max: 7.66,
          min: 7.3,
          end: 7.58,
          volumn: 2841.79,
          money: 21344.36,
        },
        {
          time: "2015-11-06",
          start: 7.52,
          max: 7.71,
          min: 7.48,
          end: 7.64,
          volumn: 2725.44,
          money: 20721.51,
        },
        {
          time: "2015-11-05",
          start: 7.48,
          max: 7.57,
          min: 7.29,
          end: 7.48,
          volumn: 3520.85,
          money: 26140.83,
        },
        {
          time: "2015-11-04",
          start: 7.01,
          max: 7.5,
          min: 7.01,
          end: 7.46,
          volumn: 3591.47,
          money: 26285.52,
        },
        {
          time: "2015-11-03",
          start: 7.1,
          max: 7.17,
          min: 6.82,
          end: 7,
          volumn: 2029.21,
          money: 14202.33,
        },
        {
          time: "2015-11-02",
          start: 7.09,
          max: 7.44,
          min: 6.93,
          end: 7.17,
          volumn: 3191.31,
          money: 23205.11,
        },
        {
          time: "2015-10-30",
          start: 6.98,
          max: 7.27,
          min: 6.84,
          end: 7.18,
          volumn: 3522.61,
          money: 25083.44,
        },
        {
          time: "2015-10-29",
          start: 6.94,
          max: 7.2,
          min: 6.8,
          end: 7.05,
          volumn: 2752.27,
          money: 19328.44,
        },
        {
          time: "2015-10-28",
          start: 7.01,
          max: 7.14,
          min: 6.8,
          end: 6.85,
          volumn: 2311.11,
          money: 16137.32,
        },
        {
          time: "2015-10-27",
          start: 6.91,
          max: 7.31,
          min: 6.48,
          end: 7.18,
          volumn: 3172.9,
          money: 21827.3,
        },
        {
          time: "2015-10-26",
          start: 6.9,
          max: 7.08,
          min: 6.87,
          end: 6.95,
          volumn: 2769.31,
          money: 19337.44,
        },
        {
          time: "2015-10-23",
          start: 6.71,
          max: 6.85,
          min: 6.58,
          end: 6.79,
          volumn: 2483.18,
          money: 16714.31,
        },
        {
          time: "2015-10-22",
          start: 6.38,
          max: 6.67,
          min: 6.34,
          end: 6.65,
          volumn: 2225.88,
          money: 14465.56,
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "candle_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    // 给图表赋值
    this.chart.data(this.transformData(this.dataList));
    // 设置度量 这里只要设置一个 range 就可以了 官方示例中还设置了些 alias 但是后没用到
    this.chart.scale({
      range: {
        nice: true,
      },
    });
    // 设置自定义提示信息
    this.chart.tooltip({
      showTitle: false,
      showMarkers: false,
      //官方示例中 {index} 这个 index 解析不出来，感觉是个bug。曲线解决方法，把 index 放 data 内  transformData 的时候加到数据里进去 
      itemTpl: '<li class="g2-tooltip-list-item" data-index={mIndex}>'
        + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>'
        + '{name}{value}</li>'
    });
    // 映射图形
    // schema 表示的是自定义图形，自定义图形必须要定义 shape 。对应自定义图形提供了一些常用的图形
    this.chart
      .schema()
      .position("time*range")
      // 区分图形颜色
      .color("trend", (val) => {
        if (val === "上涨") {
          return "#f04864";
        }

        if (val === "下跌") {
          return "#2fc25b";
        }
      })
      .shape("candle")
      // 定义提示信息字段
      .tooltip("time*start*end*max*min*index", (time, start, end, max, min,index) => {
        return {
          mIndex:index,
          name: time,
          value:
            '<div style="padding-left: 16px;line-height: 16px;text-align: left;">开盘价：' +  start + "</div>" +
            '<div style="padding-left: 16px;line-height: 16px;text-align: left;">收盘价：' + end + "</div>" +
            '<div style="padding-left: 16px;line-height: 16px;text-align: left;">最高价：' + max + "</div>" +
            '<div style="padding-left: 16px;line-height: 16px;text-align: left;">最低价：' +  min + "</div>",
        };
      });
    this.chart.interaction("element-active");
    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData(newValue);
    },
  },
  methods: {
    transformData(data) {
      const dv = new DataView().source(data);
      dv.transform({
        type: "map",
        callback(obj,index) {
          obj.index = index;
          obj.trend = obj.start <= obj.end ? "上涨" : "下跌";
          obj.range = [obj.start, obj.end, obj.max, obj.min];
          return obj;
        },
      });

      return dv.rows;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>